<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.css">
  <link rel="stylesheet" href="../css/index.css">
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
  <style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: #f4f4f4;
    }

    h1 {
        font-size:32px;
        text-align: center;
    }



    table {
      background: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        width: 100%;
        height:100%;
        
      
        border-collapse: collapse;
    }

    th, td {
        border: 1px solid #ddd;
        padding: 15px;
        text-align: left;
        font-size:16px;
    }

    th {
        background-color: #f2f2f2 /* 更改为灰色 */
        
    }

    tbody tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    .quantity-input {
        width: 80px;
        padding: 5px;
        text-align: center;
    }

    .submit-button {
        position: fixed;
        bottom: 60px;
        right: 20px;
        padding: 10px 20px;
        cursor: pointer;
        background-color: #6E6E6E; 
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 16px;
    }
</style>
  <title>Document</title>
</head>
<body>
  <div class="grid">
  
    <aside class="sidenav">
      <div class="sidenav__brand">
        <i class="fas fa-feather-alt sidenav__brand-icon"></i>
        <a class="sidenav__brand-link" href="#">物资调配<span class="text-light">管理系统</span></a>
        <i class="fas fa-times sidenav__brand-close"></i>
      </div>
      <div class="sidenav__profile">
        <div class="sidenav__profile-avatar"></div>
        <div class="sidenav__profile-title text-light">用户</div>
      </div>
      <div class="row row--align-v-center row--align-h-center">
        <ul class="navList">
          <li class="navList__heading">功能列表<i class="far fa-file-alt"></i></li>
          <li>
            <div class="navList__subheading row row--align-v-center" id="index">
              
              <span class="navList__subheading-title">首页</span>
            </div>
            
          </li>  
          <li id="managementLi">
            <div class="navList__subheading row row--align-v-center" id="management">
              
              <span class="navList__subheading-title">物资调配数据管理</span>
            </div>
            
          </li>
          <li id="warehouseLi">
            <div class="navList__subheading row row--align-v-center" id="warehouse">
              
              <span class="navList__subheading-title">仓库数据管理</span>
            </div>
            
          </li>
          <li id="submitLi">
            <div class="navList__subheading row row--align-v-center" id="submit">
              
              <span class="navList__subheading-title">物资调配请求上传</span>
            </div>
          </li>
          <li id="statisticsLi">
            <div class="navList__subheading row row--align-v-center" id="province">
              
              <span class="navList__subheading-title">省份物资统计</span>
            </div>
            
          </li>
        </ul>
      </div>
    </aside>
  
    <main class="main">
      
      <div class="main-overview">
        <div id="container">
          <body>
            <h1>
                物资列表
            </h1>
            <table id="material-table">
                <thead>
                    <tr>
                        <th>物资ID</th>
                        <th>物资名称</th>
                        <th>分类</th>
                        <th>仓库</th>
                        <th>数量</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 物资数据将通过JavaScript动态插入 -->
                </tbody>
            </table>
        
            <button class="submit-button">提交更改</button>
        
            <script>
              var initialMaterialData=[];
              
              var url='http://2c8ciz.natappfree.cc';
              
              //data=JSON.parse(data);
                        /*console.log(data);
                        generateTable(data.all_material_data); // 用获取到的数据生成表格
                        initialMaterialData = data.all_material_data; // 保存初始物资数据*/
              function fetchMaterialData() {
                fetch(url+'/data/getAllData')
                    .then(response => {
                        if (response.ok) {
                            return response.json(); // 解析JSON数据
                        }
                        throw new Error('Network response was not ok.');
                    })
                    .then(data => {
                      console.log(data);
                        //data=JSON.parse(data);
                        console.log(data);
                        generateTable(data.all_material_data); // 用获取到的数据生成表格
                        initialMaterialData = data.all_material_data; // 保存初始物资数据
                    })
                    .catch(error => {
                      //console.log(data);
                        console.error('There has been a problem with your fetch operation:', error);
                    });
                  }
                  fetchMaterialData();
            // 函数：生成表格
            function generateTable(materialData) {
                const tbody = document.getElementById('material-table').getElementsByTagName('tbody')[0];
                tbody.innerHTML = ''; // 清空现有的表格数据
    
                materialData.forEach(item => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                        <td>${item.materialId}</td>
                        <td>${item.material_name}</td>
                        <td>${item.material_category}</td>
                        <td>${item.warehouse_name}</td>
                        <td> <input type="number" class="quantity-input" data-material-id="${item.materialId}" value="${item.materialQuantity}" ></td>
                    `;
                    tbody.appendChild(tr);
                });
            }

        // 页面加载完成后从后端获取数据并生成表格
        document.addEventListener('DOMContentLoaded', () => {
            const tbody = document.getElementById('material-table').getElementsByTagName('tbody')[0];
            initialMaterialData.forEach(item => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${item.materialId}</td>
                    <td>${item.material_name}</td>
                    <td>${item.material_category}</td>
                    <td>${item.warehouse_name}</td>
                    <td><input type="number" class="quantity-input" data-id="${item.materialId}" value="${item.materialQuantity}" /></td>
                `;
                tbody.appendChild(tr);
            });
        });

        // 点击提交按钮时触发的函数
        document.querySelector('.submit-button').addEventListener('click', () => {
            var changes;
            // 遍历所有输入框
            document.querySelectorAll('.quantity-input').forEach((input) => {
                const initialValue = parseInt(input.getAttribute('value'), 10);
                const currentValue = parseInt(input.value, 10);
               // console.log(input);
                if (initialValue !== currentValue) {
             changes={
                        
                      change_amount: currentValue - initialValue,
                        material_id: parseInt(input.parentNode.parentNode.getElementsByTagName('td')[0].innerText),
                        repo_name: input.parentNode.parentNode.getElementsByTagName('td')[3].innerText
                        
                    };
                }
            });

            
                sendChangesToBackend(changes);
        });

        // 发送变化量到后端的函数
        function sendChangesToBackend(changes) {
          console.log(changes);
            fetch(url+'/data/updateData', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(changes)
                
            })
            .then(response => response.json())
            .then(data => console.log('Changes sent successfully:', data))
            .catch(error => console.error('Error sending changes:', error));
        }
            </script>
        </body>
         </div>
      </div> <!-- /.main__overview -->
    </main>
  
    <footer class="footer">
      <p><span class="footer__copyright">&copy;</span> 2024 management</p>
      <p>Crafted with <i class="fas fa-heart footer__icon"></i> by <a href="" target="_blank" class="footer__signature">@Horseman</a></p>
    </footer>
  </div>

</script>


  <script src="../js/template.js"></script>
</body>

</html>

